<template>
  <div
    class="father"
    @click="fatherClick"
    @mousedown="fatherMouseDown"
    @mouseup="fatherMouseUp"
    :style="{ top: tipLocation.top, left: tipLocation.left }"
    @mousemove="mouseMoveFunc"
  >
    <div class="son" @click.stop="sonDoubleClick"></div>
  </div>
  <div class="tip-wrap">
    <!-- 便签图标部分 -->
    <div class="tip-icon-box">
      <div :class="['tip-container', isOpenTip ? 'open-tip-icon' : '']">
        <a title="便签">
          <el-icon class="tip-icon"><notebook /></el-icon>
        </a>
        <a title="打开便签">
          <el-icon class="tip-icon" @click="handleOpenTipClick"
            ><folder-opened
          /></el-icon>
        </a>
      </div>
    </div>
    <!-- 便签内容 -->
    <div class="tip" :class="[isOpenTip ? '' : 'tip-close']">
      <el-scrollbar>
        <ul class="tip-ul">
          <tip-item
            :title="title"
            :time="time"
            :desc="desc"
            v-for="item in [1, 2, 3, 4, 5, 6, 7, 8]"
            :key="item"
          ></tip-item>
        </ul>
      </el-scrollbar>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
import TipItem from "@/components/Tip/TipItem.vue";
import doubleClick from "@/share/doubleClick";
export default defineComponent({
  components: { TipItem },
  setup() {
    const tipLocation = reactive({ top: "0", left: "0" });
    const isOpenTip = ref(false);
    function handleOpenTipClick(e) {
      isOpenTip.value = !isOpenTip.value;
    }
    const tip = reactive({
      title: "我是个便xssaxasxasxasxsaxcascascascascascascsacascascascsa签",
      time: "2022-01-3 16:00",
      desc: "我是便签内容我是便签内容我是便签内容我是便签内容我是便签内容我是便签内容我是便签内容我是便签内容我是便签内容我是便签内容",
    });
    function sonClick(e) {
      console.log("sonClick", e);
    }
    const sonDoubleClick = doubleClick(sonClick, 1000);
    function fatherClick(e) {
      console.log("fatherClick", e);
    }
    let isMoved = false;
    function b(e) {
      if (isMoved) {
        console.log("i am document, i am moving");
      }
    }
    function fatherMouseDown(e) {
      isMoved = true;
      console.log("fatherMouseDown", e);
      document.addEventListener("mousemove", b);
    }
    function fatherMouseUp(e) {
      console.log("fatherMouseUp");
      document.removeEventListener("mousemove", b);
    }
    function mouseMoveFunc(e) {
      console.log("mouseMoveFunc", e);
    }
    onMounted(() => {
      document.addEventListener("mouseup", (e) => {
        console.log("document mouseup");
        isMoved = false;
        document.removeEventListener("mousemove", b);
      });
      /* document.addEventListener('mousedown', (e) => {
        console.log('document mousedown')
      })
      document.addEventListener('click', (e) => {
        console.log('document click')
      }) */
    });
    return {
      isOpenTip,
      handleOpenTipClick,
      ...toRefs(tip),
      tipLocation,
      fatherClick,
      sonClick,
      fatherMouseDown,
      fatherMouseUp,
      sonDoubleClick,
      mouseMoveFunc,
    };
  },
});
</script>
<style lang="scss" scoped>
.father {
  margin: 200px 300px;
  width: 300px;
  height: 300px;
  background-color: pink;
  position: absolute;
}
.father:hover {
  cursor: grabbing;
}
.son {
  width: 100px;
  height: 100px;
  background-color: blueviolet;
}
.son:hover {
  cursor: pointer;
}
.tip-wrap {
  position: relative;
}
// 便签图标部分
.tip-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 2px 2px 2px 1px #ccc;
  overflow: hidden;
  top: 0;
  left: 0;
  position: absolute;
}
.tip-container {
  width: 92px;
  position: absolute;
  top: 0;
  left: 0px;
  transition: all linear 0.5s;
}
.tip-container:hover {
  cursor: pointer;
  left: -46px;
  transition: all linear 0.5s;
}
.open-tip-icon {
  left: -46px;
  transition: all linear 0.5s;
}
.tip-icon {
  line-height: 46px;
  text-align: center;
  width: 46px;
  height: 46px;
}
// 便签内容
.tip {
  left: 50px;
  top: 23px;
  position: absolute;
  width: 340px;
  height: 600px;
  border-radius: 10px;
  box-shadow: 1px 1px 2px 1px #ccc;
  background-color: #fff;
  transition: 1s linear all;
  padding: 10px 0;
}
.tip-ul {
  padding: 0 10px;
}
.tip-close {
  // translate 和 scale 关系，朝一点缩放
  transform: translate(-50%, -50%) scale(0);
}
</style>
